<template>
  <!-- 首页 -->
  <div>
    <div class="bannerImg">
      <div class="NavigationBar">
        <ul>
          <li
            v-for="(item, index) in NavigationBarText"
            :key="index"
            style="position: relative"
          >
            <router-link to="#" class="active">
              <span style="margin-right: 70px">{{ item }}</span>
              <span style="position: absolute; right: 15px">></span>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="block">
        <el-carousel trigger="click" height="420px">
          <el-carousel-item v-for="(item, index) in BannerImg" :key="index">
            <img :src="item" style="height: 420px; width: 100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="dock">
        <div class="title">我的课程表</div>
        <div class="course" v-for="item in studyCourse" :key="item.id">
          <div class="name">{{ item.title | addKeepStudy }}</div>
          <div class="position">{{ item.position | addNowStudy }}</div>
        </div>
        <div class="button">全部课程</div>
      </div>
    </div>
    <div class="course-box">
      <ul class="interest">
        <li
          @click="selectInterest(index)"
          v-for="(item, index) in interest"
          :key="index"
          :class="selectIndex == index ? 'active' : ''"
        >
          {{ item }}
        </li>
      </ul>
      <div class="update">修改兴趣</div>
    </div>
    <div class="course-text">
      <div style="display: flex; justify-content: space-between">
        <div
          style="
            font-size: 24px;
            font-weight: 900;
            color: #494949;
            margin: 15px 0;
          "
        >
          精品推荐
        </div>
        <div
          style="
            margin-top: 25px;
            color: #ccc;
            font-weight: 900;
            margin-right: 50px;
            cursor: pointer;
          "
        >
          查看全部
        </div>
      </div>
      <div class="course-items">
        <CourseItemCom
          style="margin: 5px 5px; cursor: pointer"
          v-for="item in courseInfoList"
          :key="item.id"
          :info="item"
        />
      </div>
    </div>
  </div>
</template>
<script>
import CourseItemCom from '@/components/CourseItem.vue'
export default {
  data() {
    return {
      // 顶部导航文字
      NavigationBarText: [
        '前端开发',
        '后端开发',
        '人工智能',
        '商业预测',
        '云计算&大数据',
        '运维&测试',
        'UI设计',
        '移动开发',
        '产品',
      ],
      // 轮播图
      BannerImg: [
        'http://127.0.0.1:9090/xuecheng-images/widget-banner1.png',
        'http://127.0.0.1:9090/xuecheng-images/widget-banner3.png',
        'http://127.0.0.1:9090/xuecheng-images/widget-bannerA.jpg',
        'http://127.0.0.1:9090/xuecheng-images/widget-bannerB.jpg',
        'http://127.0.0.1:9090/xuecheng-images/widget-bannerBg.png',
      ],
      // 继续学习课程列表
      studyCourse: [
        {
          id: 1,
          title: '程序设计语言',
          position: '使用对象',
        },
        {
          id: 2,
          title: 'java程序设计',
          position: 'spring cloud alibaba全架构',
        },
        {
          id: 3,
          title: '加入给我三天光明，我一定好好学微服务',
          position: 'spring cloud',
        },
      ],
      // 兴趣课程列表,最多8个，精品课程必须存在
      interest: [
        '精品推荐',
        'jQuery',
        'Spark',
        'MySQL',
        'javaWeb',
        'Spring boot',
        'spring cloud',
        'nacos',
      ],
      selectIndex: 0, // 选中兴趣的列表，默认为0，选中精品课程
      courseInfoList: [
        {
          id: '1',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
        {
          id: '2',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
        {
          id: '3',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
        {
          id: '4',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
        {
          id: '5',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
        {
          id: '6',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
        {
          id: '7',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
        {
          id: '8',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
        {
          id: '9',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
        {
          id: '10',
          images: 'http://127.0.0.1:9090/xuecheng-images/widget-demo1.png',
          title: 'Think PHP 5.0 博客系统实战项目演练',
          type: '高级',
          person: '1125',
        },
      ],
    }
  },
  methods: {
    selectInterest(index) {
      this.selectIndex = index
    },
  },
  filters: {
    // 添加继续学习字段
    addKeepStudy(value) {
      return '继续学习 ' + value
    },
    //  添加正在学习
    addNowStudy(value) {
      return '正在学习 ' + value
    },
  },
  components: {
    CourseItemCom,
  },
}
</script>

<style lang="scss" scoped>
.bannerImg {
  height: 430px;
  position: relative;
  .block {
    height: 430px;
  }
  .NavigationBar {
    z-index: 100;
    position: absolute;
    left: 120px;
    height: 420px;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.3);
    ul {
      li {
        margin-bottom: 21px;
      }
      padding: 0px;
      padding-left: 15px;
      justify-content: space-between;
      color: #fff;
      list-style-type: none;
      .icon {
        width: 20px;
        height: 20px;
        margin-left: 75px;
        vertical-align: middle;
      }
      .active {
        text-decoration: none;
        color: #fff;
      }
      .active:hover {
        color: #00a4ff;
      }
      .active:hover ~ .icon {
        color: #00a4ff;
      }
    }
  }
  .dock {
    font-size: 20px;
    z-index: 101;
    position: absolute;
    right: 120px;
    top: 50px;
    height: 320px;
    width: 250px;
    background-color: #fff;
    .title {
      color: #fff;
      font-weight: 900;
      background-color: #9bceea;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }
    .course {
      border-bottom: 1px solid #ccc;
      margin: 15px 20px 8px 20px;
      padding-bottom: 8px;
      .name {
        font-size: 18px;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .position {
        font-size: 14px;
        color: #ccc;
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .course:hover {
      color: #00a4ff;
      cursor: pointer;
    }
    .button {
      position: absolute;
      border: 4px solid #00a4ff;
      width: 85%;
      margin: 5px auto;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #00a4ff;
      font-weight: 900;
      left: 15px;
      bottom: 3px;
      cursor: pointer;
    }
  }
}
.course-box {
  display: flex;
  width: 85%;
  margin: 0 auto;
  .interest {
    cursor: pointer;
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0 auto;
    li {
      font-size: 18px;
      line-height: 60px;
      width: 145px;
      height: 60px;
      text-align: center;
      box-shadow: 3px 3px 8px #ccc;
    }
    .active {
      color: #00a4ff;
      font-weight: 900;
    }
  }
  .update {
    font-size: 20px;
    color: #00a4ff;
    font-weight: 900;
    cursor: pointer;
    line-height: 60px;
  }
}
.course-text {
  width: 85%;
  margin: 0 auto;

  .course-items {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
